<script setup lang="ts">
import type { VersionProps } from '@/types';

import type { PropType } from 'vue';

import { Icon } from '@/components/core/icon';

import {
  type Action,
  ElButton,
  ElDivider,
  ElMessageBox,
  ElTooltip,
} from 'element-plus';

defineOptions({
  name: 'Toolbar',
});
const {
  contentChanged = false,
  modifiedOption,
  originalOption,
  showDiff = true,
} = defineProps({
  contentChanged: Boolean,
  modifiedOption: {
    default: () => ({}),
    type: Object as PropType<VersionProps>,
  },
  originalOption: {
    default: () => ({}),
    type: Object as PropType<VersionProps>,
  },
  showDiff: Boolean,
});
const emits = defineEmits(['onCommand']);

async function openConfirm() {
  const res = await ElMessageBox.confirm(
    '确定使用对比文件覆盖当前文件吗？',
    '提示',
    {
      buttonSize: 'small',
      cancelButtonText: '取消',
      closeOnClickModal: false,
      confirmButtonText: '确定',
      customClass: 'wos-common-confirm',
      draggable: true,
    },
  )
    .then(() => {
      return 'confirm';
    })
    .catch((error: Action) => {
      return error;
    });
  return res;
}
const onCommand = (command: string) => {
  if (command === 'cover') {
    openConfirm().then((res) => {
      if (res === 'confirm') {
        emits('onCommand', command);
      }
    });
  } else {
    emits('onCommand', command);
  }
};
</script>
<template>
  <div class="wos-browser__toolbar">
    <div class="wos-browser__toolbar-left">
      <div
        v-if="!showDiff"
        class="item"
        title="打开文件"
        @click="onCommand('openFile')"
      >
        打开...
      </div>
      <div
        v-if="!showDiff"
        class="item"
        title="新建文件"
        @click="onCommand('newFile')"
      >
        新建...
      </div>
      <div
        v-if="!showDiff"
        class="item"
        title="提交为新版本"
        @click="onCommand('commit')"
      >
        提交...
      </div>
      <div
        v-if="!showDiff"
        class="item"
        title="将当前版本发布到生产环境"
        @click="onCommand('release')"
      >
        发布...
      </div>
      <div
        v-if="!showDiff"
        class="item"
        title="比较生产版本和本地最新版本差异"
        @click="onCommand('pull')"
      >
        差异...
      </div>
      <div
        v-if="showDiff"
        class="item"
        title="退出版本对比"
        @click="onCommand('exitCompare')"
      >
        退出
      </div>
      <div
        v-if="showDiff"
        class="item"
        title="使用对比文件覆盖当前文件"
        @click="onCommand('cover')"
      >
        覆盖...
      </div>
      <div class="item" title="编辑器设置" @click="onCommand('setting')">
        设置...
      </div>
    </div>
    <div v-if="!showDiff" class="wos-browser__toolbar-right">
      <ElTooltip
        v-if="contentChanged"
        content="当前文件未保存，请及时保存以防数据丢失。"
        placement="left"
      >
        <Icon icon="ep:question-filled" />
      </ElTooltip>

      <ElButton
        :disabled="!contentChanged"
        size="small"
        @click="onCommand('saveFile')"
      >
        保存
      </ElButton>
    </div>
    <div v-if="showDiff" class="wos-browser__toolbar-right">
      {{ originalOption?.name }}（对比文件）
      <ElDivider direction="vertical" />
      {{ modifiedOption?.name }}（当前文件）
    </div>
  </div>
</template>
